<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" >
    <meta http-equiv="X-UA-Compatible" content="IE=11,IE=10,IE=9,IE=8" >
    <meta name="baidu-site-verification" content="dIcXMeY8Ya" />
    
    <title>慕课网Ajax学习笔记 | 即将拥有人鱼线丶</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" >
    <meta name="keywords" content="FutaoSmile, 前端, Web, 付韬, 个人博客" >
    <meta name="description" content="付韬FutaoSmile" >

    
    <link rel="alternative" href="/atom.xml" title="即将拥有人鱼线丶" type="application/atom+xml" >
    
    
    <link rel="shortcut icon" href="/coder957/coder957/favicon.ico" >
    
    <link rel="stylesheet" href="/coder957/css/style.css">
    <!--[if lt IE 9]>
    <script src="/coder957/js/html5.js"></script>
    <![endif]-->
    
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "//hm.baidu.com/hm.js?fd459238242776d173cdc64918fb32f2";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>


</head>

<body class="home">
    <!--[if lt IE 9]>
    <div class="browsehappy">
        当前网页 <strong>不支持</strong>
        你正在使用的浏览器. 为了正常的访问, 请 <a href="http://browsehappy.com/">升级你的浏览器</a>.
    </div>
    <![endif]-->

    <!-- 博客头部 -->
    <header class="header">
    <section class="container header-main">
        <div class="logo">
            <a href="/coder957/">
                <div class="cover">
                    <span class="name">即将拥有人鱼线丶</span>
                    <span class="description">FutaoSmile</span>
                </div>
            </a>
        </div>
        <div class="dropnav icon-paragraph-justify" id="JELON__btnDropNav"></div>
        <ul class="menu hidden" id="JELON__menu">
            
                <li rel="/coder957/2017/09/19/慕课网Ajax学习笔记/index.html" class="item ">
                    <a href="/coder957/" title="首页" class="icon-home">&nbsp;首页</a>
                </li>
                
                <li rel="/coder957/2017/09/19/慕课网Ajax学习笔记/index.html" class="item ">
                    <a href="/coder957/lab/" title="实验室" class="icon-lab">&nbsp;实验室</a>
                </li>
                
                <li rel="/coder957/2017/09/19/慕课网Ajax学习笔记/index.html" class="item ">
                    <a href="/coder957/about/" title="关于" class="icon-about">&nbsp;关于</a>
                </li>
                
                <li rel="/coder957/2017/09/19/慕课网Ajax学习笔记/index.html" class="item ">
                    <a href="/coder957/comment/" title="留言" class="icon-comment">&nbsp;留言</a>
                </li>
                
        </ul>
        <div class="profile clearfix">
            <div class="feeds fl">
                
                    
                        <p class="links">
                            
                                <a href="https://github.com/FutaoSmile" target="_blank">
                                    Github
                                </a>
                                |
                                    
                                        
                                <a href="http://www.jianshu.com/u/9e2e579df7dd" target="_blank">
                                    简书
                                </a>
                                
                                        
                        </p>
                        <p class="sns">
                            
                                <a href="http://weibo.com/u/2379076265?refer_flag=1001030001_&amp;nick=FutaoSmile%E4%B8%B6" class="sinaweibo" target="_blank"><b>■</b> 新浪微博</a>
                                
                                <a href="https://gitee.com/FutaoSmile" class="qqweibo" target="_blank"><b>■</b> 码云</a>
                                
                                    <!-- <a href="javascript: void(0);" class="wechat">
                        <b>■</b>
                        公众号
                        <span class="popover">
                            <img src="/coder957/img/wechat_mp.jpg" width="120" height="120" alt="我的微信订阅号">
                            <i class="arrow"></i>
                        </span>
                    </a> -->
                        </p>
                        
            </div>
            <div class="avatar fr">
                <img src="/coder957/img/head.png" alt="avatar" title="Jelon">
            </div>
        </div>
    </section>
</header>

    <!-- 博客正文 -->
    <div class="container body clearfix">
        <section class="content">
            <div class="content-main widget">
                <!-- 文章页 -->
<!-- 文章 -->
<article class="post article">
    <header class="text-center">
        <h3 class="post-title"><span>慕课网Ajax学习笔记</span></h3>
    </header>
    <p class="post-meta text-center">
        FutaoSmile丶 发表于
            <time datetime="2017-09-19T14:49:01.000Z">2017-09-19</time>
    </p>
    <div class="post-content">
        <blockquote>
<p><a href="http://www.imooc.com/learn/250" target="_blank" rel="external">慕课网Ajax全接触</a></p>
</blockquote>
<p><b>Ajax全称：</b>Asynchronous JavaScript and XML（异步的JavaScript和XML）<br><b>特点：</b>在不必刷新整个网页的情况下实现局部更新，带来更好的用户体验。<br>因为<code>XMLHttpRequest</code>（XHR）对象的出现才有了异步的概念。通过<code>XMLHttpRequest</code>对象实现后台和服务器进行数据的交换而不必刷新整个页面。<br><a id="more"></a></p>
<h4 id="概念介绍"><a href="#概念介绍" class="headerlink" title="概念介绍"></a>概念介绍</h4><ul>
<li>运用HMTL和CSS来实现页面，表达信息。</li>
<li>运用XMLHttpRequest和Web服务器进行数据的异步交换。</li>
<li>运用JavaScript操作DOM元素，实现动态局部刷新。</li>
</ul>
<p>实例化一个XHR对象<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">var request =new XMLHttpRequest();</div></pre></td></tr></table></figure></p>
<p> 对于IE6及更老版本的IE：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">var request;</div><div class="line">if(windows.XMLHttpRequest)&#123;</div><div class="line">  request=new XMLHttpRequest();//IE7+,Fiefix,Chrome,Opera,Safari...</div><div class="line">&#125;</div><div class="line">else&#123;</div><div class="line">    request=new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);//IE6,IE5</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<blockquote>
<p>###”HTTP请求”概念介绍<br><strong>一个完整的HTTP请求过程，通常需要下面7个步骤：</strong></p>
<ol>
<li>建立TCP连接</li>
<li>Web浏览器向Web服务器发送请求命令</li>
<li>Web浏览器发送请求头信息</li>
<li>Web服务器应答</li>
<li>Web服务器发送应答头信息</li>
<li>Web服务器向浏览器发送数据</li>
<li>Web服务器关闭TCP连接</li>
</ol>
<p><strong>一个HTTP请求一般由四部分组成：</strong></p>
<ol>
<li>HTTP请求的方法或者动作，Get/Post</li>
<li>正在请求的地址URL</li>
<li>请求头，包含一些客户端环境信息，身份验证信息等</li>
<li>请求体，也就是请求正文，请求正文中可以包含客户提交的查询字符串信息，表单信息</li>
</ol>
<p><strong>GET与POST</strong><br><code>GET</code>：一般用于信息获取<br>使用URL传递参数（变量会放在URL里边）<br>对所发送信息的数量也有限制，一般在2000个字符<br>幂等，执行N次与执行1次效果相同，都不会改变数据库的信息<br><code>POST</code>：一般用于修改服务器上的资源<br>对所发送信息的数量无限制</p>
<p><strong> 一个HTTP响应一般由三部分组成：</strong></p>
<ol>
<li>一个数字和文字组成的状态码，用来告诉客户端请求是成功还是失败</li>
<li>响应头，响应头也和请求头一样包含许多有用的信息，例如服务器类型，日期时间，内容类型和长度等</li>
<li>响应体，也就是响应正文，服务器传来的内容</li>
</ol>
</blockquote>
<table>
<thead>
<tr>
<th><b>HTTP状态码分类</b></th>
</tr>
</thead>
<tbody>
<tr>
<td>分类</td>
<td>分类描述</td>
</tr>
<tr>
<td>1XX   信息</td>
<td>服务器收到请求，需要请求者继续执行操作</td>
</tr>
<tr>
<td>2XX   成功</td>
<td>操作被成功接收并处理，例如 200 OK</td>
</tr>
<tr>
<td>3XX   重定向</td>
<td>需要进一步的操作以完成请求</td>
</tr>
<tr>
<td>4XX  客户端错误</td>
<td>请求包含语法错误或无法完成请求，例如 404 NOT FOUND</td>
</tr>
<tr>
<td>5XX  服务器错误</td>
<td>服务器在处理请求的过程中发生了错误   例如 500</td>
</tr>
</tbody>
</table>
<h3 id="XHR发送请求"><a href="#XHR发送请求" class="headerlink" title="XHR发送请求"></a>XHR发送请求</h3><ul>
<li>open(method,url,async)     async-&gt;true异步(默认)/false同步</li>
<li>send(string)<br>例如：<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">request.open(&quot;GET&quot;,&quot;get.php&quot;,true);</div><div class="line">request.send();//因为GET请求内容一般在url中，所以send()可以为空，但是post请求需要在send()中添加信息</div></pre></td></tr></table></figure>
</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">request.open(&quot;POST&quot;,&quot;create.php&quot;,true);</div><div class="line">request.setRequestHeader(&quot;Content-type&quot;,&quot;application/x-www-form-urlencoded&quot;);//请求头信息(一定是写在open()和send()中间)</div><div class="line">request.send(&quot;name=王二狗&amp;sex=男&quot;);</div></pre></td></tr></table></figure>
<h3 id="XHR取得响应"><a href="#XHR取得响应" class="headerlink" title="XHR取得响应"></a>XHR取得响应</h3><ul>
<li><code>responseText</code>：获取字符串形式的响应数据<br><em><code>responseXML</code>：获取XML形式的响应数据
</em><code>status</code>和<code>statusText</code>：以数字和文本形式返回HTTP状态码</li>
<li><code>getAllRespondseHeader()</code>：获取所有的响应报头</li>
<li><code>getResponseHeader()</code>：查询响应中的某个字段的值</li>
<li><h2 id="监听readyState属性"><a href="#监听readyState属性" class="headerlink" title="监听readyState属性"></a>监听<code>readyState</code>属性</h2><ul>
<li>0：请求未初始化，open还没有调用</li>
<li>1：服务器连接已经建立，open已经调用了</li>
<li>2：请求已接收，也就是接收到头信息了</li>
<li>3：请求处理中，也就是接收到响应主体了</li>
<li>4：请求已完成，且响应已就绪，也就是完成响应了</li>
</ul>
</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">var request=new XMLHttpRequest();</div><div class="line">request.open(&quot;GET&quot;,&quot;get.php&quot;,true);</div><div class="line">request.send();</div><div class="line">request.onreadystatechange=function()&#123;</div><div class="line">      if(request.readyState===4 &amp;&amp; request.status===200)&#123;</div><div class="line">      //做一些事情request.responseText</div><div class="line">    &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h3 id="举个栗子-基于之前的数据库，有学生表"><a href="#举个栗子-基于之前的数据库，有学生表" class="headerlink" title="举个栗子(基于之前的数据库，有学生表)~"></a>举个栗子(基于之前的数据库，有学生表)~</h3><p>【前端】<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line">&lt;script src=&quot;~/Scripts/jquery-1.10.2.min.js&quot;&gt;&lt;/script&gt;</div><div class="line">&lt;script type=&quot;text/javascript&quot;&gt;</div><div class="line">    $(document).ready(function() &#123;</div><div class="line">        $(&quot;#search&quot;).click(function() &#123;</div><div class="line">            var request = new XMLHttpRequest();</div><div class="line">            request.open(&quot;GET&quot;, &quot;/Ajax/Details?id=&quot; + parseInt($(&quot;#keyWord&quot;).val()), true);    //通过GET方法去请求AjaxController下面的Details方法，并传入id的值作为查询条件</div><div class="line">            request.send();</div><div class="line">        &#125;);</div><div class="line">    &#125;)</div><div class="line">&lt;/script&gt;</div><div class="line">&lt;label&gt;请输入要查询的学生编号：&lt;/label&gt;</div><div class="line">&lt;input type=&quot;text&quot; id=&quot;keyWord&quot;/&gt;</div><div class="line">&lt;button id=&quot;search&quot;&gt;查询&lt;/button&gt;</div></pre></td></tr></table></figure></p>
<p>【后端】AjaxController控制器Details方法<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div></pre></td><td class="code"><pre><div class="line">public ActionResult Details(int id)</div><div class="line">        &#123;</div><div class="line">            if (dbContext.StudentSet.Find(id) == null)</div><div class="line">            &#123;</div><div class="line">                return Content(&quot;Fail&quot;);</div><div class="line">            &#125;</div><div class="line">            else</div><div class="line">            &#123;</div><div class="line">                return Content(&quot;Success&quot;);</div><div class="line">            &#125;</div><div class="line">        &#125;</div><div class="line">```  </div><div class="line">【结果】我的数据库中没有id为1的数据，有id为6的数据</div><div class="line">![结果.gif](http://upload-images.jianshu.io/upload_images/1846623-f56727e2216daf20.gif?imageMogr2/auto-orient/strip)</div><div class="line"># JSON基础</div><div class="line">&gt; ** 简介 JSON： ** JavaScript对象表示法（JavaScript Object Notation） JSON是存储和交换文本信息的语法，类似XML，它采用键值对的方式来组织，易于阅读和编写，同时也易于机器解析和生成* JSON是独立于语言的，也就是说不管什么语言，都可以解析Json，只需要按照json的规则来就行</div><div class="line"></div><div class="line">### JSON与XML比较</div><div class="line">* Json的长度和XML格式比起来很短小（减少带宽）</div><div class="line">* Json读写的速度更快</div><div class="line">* Json可以使用JavaScript内建的方法直接进行解析，转换成JavaScript对象，非常方便</div><div class="line"></div><div class="line">## JSON语法规则</div><div class="line">* ** JSON数据的书写格式是：名称/值对 **</div><div class="line">名称/值对组合中的名称写在前面（在双引号中），值对写在后面（同样在双引号中），中间用冒号隔开，比如，&quot;name&quot;:&quot;郭靖&quot;</div><div class="line">* ** JSON的值可以是下面这些类型： **</div><div class="line">1. 数字(整型或浮点数)，比如123,1.23</div><div class="line">2. 字符串（在双引号中）</div><div class="line">3. 逻辑值（true，false）</div><div class="line">4. 数组（写在方括号中）</div><div class="line">5. 对象（写在花括号中）</div><div class="line">6. null</div><div class="line"></div><div class="line"> 例如：</div></pre></td></tr></table></figure></p>
<p>{<br>    “staff”:[<br>    {“name”:”宏碁”,”age”:70},<br>   {“name”:”郭靖”,”age”:35},<br>   {“name”:”黄蓉”,”age”:30}<br>]<br>}<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line">```</div><div class="line">&#123;</div><div class="line">	&quot;nane&quot;: &quot;los&quot;,</div><div class="line">	&quot;success&quot;: &quot;True&quot;,</div><div class="line">	&quot;message&quot;: &quot;请求成功&quot;,</div><div class="line">	&quot;info&quot;: [&#123;</div><div class="line">		&quot;name&quot;: &quot;laosiji&quot;,</div><div class="line">		&quot;age&quot;: &quot;100&quot;,</div><div class="line">		&quot;asdas&quot;: &quot;121&quot;,</div><div class="line">		&quot;hobby&quot;: [&quot;daqiu&quot;, &quot;youyong&quot;],</div><div class="line">		&quot;aa&quot;: [&#123;</div><div class="line">			&quot;anme&quot;: &quot;aa&quot;,</div><div class="line">			&quot;age&quot;: 20</div><div class="line">		&#125;, &#123;</div><div class="line">			&quot;aa&quot;: &quot;asdas&quot;,</div><div class="line">			&quot;age&quot;: 5565</div><div class="line">		&#125;]</div><div class="line">	&#125;]</div><div class="line">&#125;</div><div class="line">`</div></pre></td></tr></table></figure></p>
<h2 id="JSON解析"><a href="#JSON解析" class="headerlink" title="JSON解析"></a>JSON解析</h2><p> <strong> 方式一： </strong><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">var jsondata=&apos;&#123;&quot;staff&quot;:[&#123;&quot;name&quot;:&quot;黄蓉&quot;,&quot;age&quot;:25&#125;,&#123;&quot;name&quot;:&quot;王五&quot;,&quot;age&quot;:25&#125;,&#123;&quot;name&quot;:&quot;升水&quot;,&quot;age&quot;:22&#125;]&#125;&apos;;</div><div class="line">var jsonobj=eval(&apos;(&apos;+jsondata+&apos;)&apos;);    //如果在json数据中存在js脚本的话会直接执行。（危险）</div><div class="line">alert(jsonobj.staff[0].name);</div></pre></td></tr></table></figure></p>
<p><strong> 方式二 </strong><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">var jsondata=&apos;&#123;&quot;staff&quot;:[&#123;&quot;name&quot;:&quot;黄蓉&quot;,&quot;age&quot;:25&#125;,&#123;&quot;name&quot;:&quot;王五&quot;,&quot;age&quot;:25&#125;,&#123;&quot;name&quot;:&quot;升水&quot;,&quot;age&quot;:22&#125;]&#125;&apos;;</div><div class="line">var jsonobj=JSON.parse(jsondata);    //如果在json数据中存在js脚本的话会报错(常用，安全，方便)。</div><div class="line">alert(jsonobj.staff[0].name);</div></pre></td></tr></table></figure></p>
<p>在线JSON格式化和校验工具<a href="http://jsonlint.com/" target="_blank" rel="external">jsonlint</a></p>
<h2 id="用jQuery实现Ajax"><a href="#用jQuery实现Ajax" class="headerlink" title="用jQuery实现Ajax"></a>用jQuery实现Ajax</h2><ul>
<li>jQuery.ajax({[settings]})     $.ajax([{settings]})</li>
<li>type：Method类型，”POST”或者“GET”，默认为“GET”</li>
<li>url：发送请求的地址</li>
<li>data：一个对象，连同请求发送到服务器的数据</li>
<li>dataType：预期服务器返回的数据类型，如果不指定，jQuery将自动根据HTTP包MIME信息来智能判断，一般我们采用json格式，可以设置为“json”</li>
<li>success：是一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功的字符串</li>
<li>error：是一个方法，请求失败时调用此函数。传入XMLHttpRequest对象<br><strong> 例如 </strong><br>GET<br><img src="http://upload-images.jianshu.io/upload_images/1846623-c0dac8fd64baf234.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="$.ajax({格式设置，注意success和error返回的数据是不同的})"><br>POST</li>
</ul>
<p><img src="http://upload-images.jianshu.io/upload_images/1846623-3310caba0f3e502d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="数据以JSOn格式写在data中"></p>
<h2 id="跨域"><a href="#跨域" class="headerlink" title="跨域"></a>跨域</h2><p><img src="http://upload-images.jianshu.io/upload_images/1846623-4b930f701b527e56.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="跨域的概念"></p>
<p> JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。什么是跨域呢，简单地理解就是因为JavaScript同源策略的限制，a.com域名下的js无法操作b.com或c.a.com域名下的对象。</p>
<p><img src="http://upload-images.jianshu.io/upload_images/1846623-4ab986311a197cd0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="Paste_Image.png"></p>
<h3 id="处理跨域的方法一：代理"><a href="#处理跨域的方法一：代理" class="headerlink" title="处理跨域的方法一：代理"></a>处理跨域的方法一：代理</h3><p><img src="http://upload-images.jianshu.io/upload_images/1846623-5e8823526a952029.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=" 后端 处理跨域的方法一：代理"></p>
<h3 id="处理跨域方法二：JSONP"><a href="#处理跨域方法二：JSONP" class="headerlink" title="处理跨域方法二：JSONP"></a>处理跨域方法二：JSONP</h3><p><img src="http://upload-images.jianshu.io/upload_images/1846623-71e838f6b9667790.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=" 前端 处理跨域方法二：JSONP"></p>
<h3 id="处理跨域方法三：XHR2"><a href="#处理跨域方法三：XHR2" class="headerlink" title="处理跨域方法三：XHR2"></a>处理跨域方法三：XHR2</h3><p><img src="http://upload-images.jianshu.io/upload_images/1846623-62cc88faab15f022.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="Paste_Image.png"></p>

    </div>
    <p class="post-meta">
        <span class="post-cat">分类：
            <a class="cat-link" href="/coder957/categories/学习/">学习</a>
        </span>
        <span class="post-tags">
            标签：
            
    
        <a href="/coder957/tags/Ajax/" title="Ajax">Ajax</a>
    

        </span>
    </p>
</article>
<!-- 分享按钮 -->

  <div class="article-share clearfix text-center">
    <div class="share-area">
      <span class="share-txt">分享到：</span>
      <a href="javascript: window.open('http://service.weibo.com/share/share.php?url=' + encodeURIComponent(location.href) + '&title=' + document.title + '&language=zh_cn');" class="share-icon weibo"></a>
      <a href="javascript: alert('请复制链接到微信并发送');" class="share-icon wechat"></a>
      <a href="javascript: window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + encodeURIComponent(location.href) + '&title=' + document.title);" class="share-icon qqzone"></a>
      <a href="javascript: window.open('http://connect.qq.com/widget/shareqq/index.html?url=' + encodeURIComponent(location.href) + '&desc=Jelon个人博客&title=' + document.title + '&callback=' + encodeURIComponent(location.href));" class="share-icon qq"></a>
      <a href="javascript: window.open('http://shuo.douban.com/!service/share?href=' + encodeURIComponent(location.href) + '&name=' + document.title + '&text=' + document.title);" class="share-icon douban"></a>
    </div>
  </div>


    <!-- 上一篇/下一篇 -->

<div class="article-nav clearfix">
    
    <span class="prev fl">
        上一篇<br >
        <a href="/coder957/2017/09/20/java-json/">
            
                Java处理Json
            
        </a>
    </span>
    

    
    <span class="next fr">
        下一篇<br >
        <a href="/coder957/2017/09/16/maven/">
            
                maven
            
        </a>
    </span>
    
</div>

        <!-- 文章评论 -->
        
  <script src="/coder957/js/comment.js"></script>
  <div id="comments" class="comment">
    <!--
    <div class="sign-bar">
      GitHub 已登录!
      <span class="sign-link">登出</span>
    </div>
    <section class="box">
      <div class="com-avatar"><img src="/img/jelon.jpg" alt="avatar"></div>
      <div class="com-text">
        <div class="main">
          <textarea class="text-area-edited show" placeholder="欢迎评论！"></textarea>
          <div class="text-area-preview"></div>
        </div>
        <div class="switch">
          <div class="switch-item on">编辑</div>
          <div class="switch-item">预览</div>
        </div>
        <div class="button">提交</div>
      </div>
    </section>
    <section class="tips">注：评论支持 markdown 语法！</section>
    <section class="list-wrap">
      <ul class="list">
        <li>
          <div class="user-avatar">
            <a href="/">
              <img src="/img/jelon.jpg" alt="user-avatar">
            </a>
          </div>
          <div class="user-comment">
            <div class="user-comment-header">
              <span class="post-name">张德龙</span>
              <span class="post-time">2017年12月12日</span>
              <span class="like liked">已赞</span>
              <span class="like-num">2</span>
            </div>
            <div class="user-comment-body">333333</div>
          </div>
        </li>
        <li>
          <div class="user-avatar">
            <a href="/">
              <img src="/img/jelon.jpg" alt="user-avatar">
            </a>
          </div>
          <div class="user-comment">
            <div class="user-comment-header">
              <span class="post-name">刘德华</span>
              <span class="post-time">2017年12月12日</span>
              <span class="like">点赞</span>
              <span class="like-num">2</span>
            </div>
            <div class="user-comment-body">vvvvv</div>
          </div>
        </li>
      </ul>
      <div class="page-nav">
        <a href="javascript: void(0);" class="item">1</a>
        <a href="javascript: void(0);" class="item">2</a>
        <a href="javascript: void(0);" class="item current">3</a>
      </div>
    </section>
    -->
  </div>
  <script>
  JELON.Comment({
    container: 'comments',
    label: '慕课网Ajax学习笔记' || '2017/09/19/慕课网Ajax学习笔记/',
    owner: 'FutaoSmile',
    repo: 'blog_comments',
    clientId: '149ec394071cfd7f0f47',
    clientSecret: 'd1c988f53efa3f0f8651799f8212cc8e2cab24b9'
  });
  </script>


            </div>

        </section>
        <!-- 侧栏部分 -->
<aside class="sidebar">
    <section class="widget">
        <h3 class="widget-hd"><strong>文章分类</strong></h3>
        <!-- 文章分类 -->
<ul class="widget-bd">
    
    <li>
        <a href="/coder957/categories/后端/">后端</a>
        <span class="badge">(5)</span>
    </li>
    
    <li>
        <a href="/coder957/categories/Java/">Java</a>
        <span class="badge">(8)</span>
    </li>
    
    <li>
        <a href="/coder957/categories/Web技术/">Web技术</a>
        <span class="badge">(3)</span>
    </li>
    
    <li>
        <a href="/coder957/categories/后端/Java/">Java</a>
        <span class="badge">(5)</span>
    </li>
    
    <li>
        <a href="/coder957/categories/GIt/">GIt</a>
        <span class="badge">(1)</span>
    </li>
    
    <li>
        <a href="/coder957/categories/Java/Spring/">Spring</a>
        <span class="badge">(3)</span>
    </li>
    
    <li>
        <a href="/coder957/categories/Java/学习/">学习</a>
        <span class="badge">(5)</span>
    </li>
    
    <li>
        <a href="/coder957/categories/Web技术/Java/">Java</a>
        <span class="badge">(1)</span>
    </li>
    
    <li>
        <a href="/coder957/categories/Web技术/Kotlin/">Kotlin</a>
        <span class="badge">(1)</span>
    </li>
    
    <li>
        <a href="/coder957/categories/GIt/Web技术/">Web技术</a>
        <span class="badge">(1)</span>
    </li>
    
    <li>
        <a href="/coder957/categories/学习/">学习</a>
        <span class="badge">(1)</span>
    </li>
    
</ul>
    </section>

    
    <section class="widget">
        <h3 class="widget-hd"><strong>热门标签</strong></h3>
        <!-- 文章标签 -->
<div class="widget-bd tag-wrap">
  
    <a class="tag-item" href="/coder957/tags/Java/" title="Java">Java (12)</a>
  
    <a class="tag-item" href="/coder957/tags/Spring/" title="Spring">Spring (9)</a>
  
    <a class="tag-item" href="/coder957/tags/kotlin/" title="kotlin">kotlin (7)</a>
  
    <a class="tag-item" href="/coder957/tags/Maven/" title="Maven">Maven (2)</a>
  
    <a class="tag-item" href="/coder957/tags/Hibernate/" title="Hibernate">Hibernate (2)</a>
  
    <a class="tag-item" href="/coder957/tags/kotlin-小知识/" title="kotlin 小知识">kotlin 小知识 (1)</a>
  
    <a class="tag-item" href="/coder957/tags/Kotlin/" title="Kotlin">Kotlin (1)</a>
  
    <a class="tag-item" href="/coder957/tags/Json/" title="Json">Json (1)</a>
  
    <a class="tag-item" href="/coder957/tags/热点文章/" title="热点文章">热点文章 (1)</a>
  
    <a class="tag-item" href="/coder957/tags/博主推荐/" title="博主推荐">博主推荐 (1)</a>
  
    <a class="tag-item" href="/coder957/tags/转载/" title="转载">转载 (1)</a>
  
    <a class="tag-item" href="/coder957/tags/资料/" title="资料">资料 (1)</a>
  
    <a class="tag-item" href="/coder957/tags/Ajax/" title="Ajax">Ajax (1)</a>
  
</div>
    </section>
    

    

    
    <!-- 友情链接 -->
    <section class="widget">
        <h3 class="widget-hd"><strong>友情链接</strong></h3>
        <!-- 文章分类 -->
<ul class="widget-bd">
    
        <li>
            <a href="http://lsc95.github.io/" target="_blank" title="椿哥的狗窝">椿哥的狗窝</a>
        </li>
    
        <li>
            <a href="http://futaosmile.oschina.io/documents/" target="_blank" title="donot click me">Document</a>
        </li>
    
        <li>
            <a href="" target="_blank" title="虚位以待">loading...</a>
        </li>
    
</ul>
    </section>
    
</aside>
<!-- / 侧栏部分 -->
    </div>

    <!-- 博客底部 -->
    <footer class="footer">
    &copy;
    
                2016-
                2017
                    

                        <a href="/coder957/">Loves You</a>
</footer>
<div class="back-to-top" id="JELON__backToTop" title="返回顶部">返回顶部</div>
    <!--博客js脚本 -->
    <!-- 这里放网站js脚本 -->
<script src="/coder957/js/main.js"></script>
</body>
</html>